<template>
	<view class="music-container">
		<!-- Top Bar -->
		<view class="top-bar">
			<view class="left">
				<text class="icon-back">←</text>
				<image src="/static/logo.png" class="avatar"></image>
				<text class="greeting">Hi Lily</text>
			</view>
			<view class="search">
				<text class="icon-search">🔍</text>
				<input type="text" placeholder="搜索音乐" class="search-input" />
			</view>
			<view class="right">
				<text class="time">{{ currentTime }}</text>
				<text class="icon-network">📶</text>
				<text class="icon-battery">🔋</text>
			</view>
		</view>

		<!-- Music Tabs -->
		<view class="music-tabs">
			<view class="tab-item active">音乐</view>
			<view class="tab-item">发现</view>
			<view class="tab-item">我的列表</view>
		</view>

		<!-- Music List -->
		<view class="music-list">
			<view class="music-row">
				<view class="music-item">
					<image src="/static/music/xyq.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">半世风雨</text>
						<text class="artist">宋文军</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
				<view class="music-item">
					<image src="/static/music/xyq.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">半世风雨</text>
						<text class="artist">宋文军</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
				<view class="music-item">
					<image src="/static/music/zt.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">早安</text>
						<text class="artist">张世浪</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
			</view>
			<view class="music-row">
				<view class="music-item">
					<image src="/static/music/xyq.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">半世风雨</text>
						<text class="artist">宋文军</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
				<view class="music-item">
					<image src="/static/music/xyq.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">半世风雨</text>
						<text class="artist">宋文军</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
				<view class="music-item">
					<image src="/static/music/xyq.png" class="album-art"></image>
					<view class="music-info">
						<text class="song-name">半世风雨</text>
						<text class="artist">宋文军</text>
					</view>
					<text class="play-btn">播放</text>
				</view>
			</view>
		</view>

		<!-- Device Info -->
		<view class="device-info">
			<image src="/static/music/pf.png" class="device-icon"></image>
			<view class="info-text">
				<text class="device-name">水草巨</text>
				<text class="device-stats">水箱：50% 5.2L/min 56°C</text>
			</view>
		</view>

		<!-- Settings -->
		<view class="settings">
			<text class="settings-text">设置</text>
		</view>

		<!-- Bottom Player -->
		<view class="bottom-player">
			<image src="/static/music/xyq.png" class="player-album"></image>
			<view class="player-controls">
				<text class="icon-prev">⏮️</text>
				<text class="icon-play">▶️</text>
				<text class="icon-next">⏭️</text>
			</view>
			<view class="volume-control">
				<text class="icon-volume">🔊</text>
				<slider value="50" min="0" max="100" class="volume-slider"></slider>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTime: '12:50',
			currentSong: null,
			isPlaying: false,
			volume: 50,
			musicList: [
				{
					id: 1,
					title: '半世风雨',
					artist: '宋文军',
					albumArt: '/static/music/xyq.png'
				},
				{
					id: 2,
					title: '早安',
					artist: '张世浪',
					albumArt: '/static/music/zt.png'
				}
			]
		};
	},
	methods: {
		playSong(song) {
			this.currentSong = song;
			this.isPlaying = true;
			// Add actual music playback logic here
		},
		togglePlay() {
			this.isPlaying = !this.isPlaying;
			// Toggle play/pause logic
		},
		nextSong() {
			// Next song logic
		},
		prevSong() {
			// Previous song logic
		},
		updateVolume() {
			// Update volume logic
		}
	},
	mounted() {
		// Set current time
		setInterval(() => {
			const now = new Date();
			this.currentTime = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
		}, 1000);
	}
};
</script>

<style lang="scss">
.music-container {
	width: 1920px;
	height: 1080px;
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}

.top-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.top-bar .left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.top-bar .icon-back {
	font-size: 24px;
	cursor: pointer;
}

.top-bar .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.top-bar .greeting {
	font-size: 18px;
	font-weight: bold;
}

.top-bar .search {
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 20px;
	padding: 5px 10px;
	width: 300px;
}

.top-bar .icon-search {
	font-size: 18px;
	margin-right: 10px;
}

.top-bar .search-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
}

.top-bar .right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.top-bar .time {
	font-size: 16px;
}

.music-tabs {
	width: 100%;
	display: flex;
	justify-content: space-around;
	background-color: white;
	border-radius: 10px;
	padding: 10px 0;
	margin-bottom: 20px;
}

.music-tabs .tab-item {
	font-size: 18px;
	padding: 10px 20px;
	border-radius: 20px;
	cursor: pointer;
}

.music-tabs .tab-item.active {
	background-color: #007aff;
	color: white;
}

.music-list {
	width: 100%;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.music-list .music-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.music-list .music-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 30%;
}

.music-list .album-art {
	width: 80px;
	height: 80px;
	border-radius: 10px;
}

.music-list .music-info {
	flex: 1;
}

.music-list .song-name {
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.music-list .artist {
	font-size: 14px;
	color: #666;
}

.music-list .play-btn {
	background-color: #007aff;
	color: white;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 14px;
	cursor: pointer;
}

.device-info {
	width: 100%;
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.device-info .device-icon {
	width: 60px;
	height: 60px;
}

.device-info .info-text {
	flex: 1;
}

.device-info .device-name {
	font-size: 18px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.device-info .device-stats {
	font-size: 14px;
	color: #666;
}

.settings {
	width: 100%;
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	margin-bottom: 20px;
}

.settings .settings-text {
	font-size: 18px;
	color: #666;
}

.bottom-player {
	width: 100%;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bottom-player .player-album {
	width: 60px;
	height: 60px;
	border-radius: 10px;
}

.bottom-player .player-controls {
	display: flex;
	align-items: center;
	gap: 20px;
}

.bottom-player .icon-prev,
.bottom-player .icon-next {
	font-size: 24px;
	cursor: pointer;
}

.bottom-player .icon-play {
	font-size: 32px;
	cursor: pointer;
}

.bottom-player .volume-control {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 200px;
}

.bottom-player .icon-volume {
	font-size: 18px;
}

.bottom-player .volume-slider {
	flex: 1;
}
</style>